<template>
  <div class="grid">
    <el-table
      :data="tableData"
      border
      row-key="id"
      :show-header="false"
      :cell-class-name="cellClassName"
    >
      <el-table-column
        v-for="(item,index) in tableColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="width"
        align="center"
        :fixed="index == 0 ? 'left' : null"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "horGrid",
  props: {
    column: {
      type: Array,
      required: true
    },
    data: {
      type: Array
    },
    width: {
      type: Number,
      default: 150
    },
  },
  data() {
    return {
      tableColumn: [],
      tableData: [],
      currentCell: ""
    };
  },
  methods: {
    toTableData() {
      let column = this.column;
      let dataList = this.data;
      let tableColumn = [];
      let tableData = [];
      let tCol = column[0];
      tableColumn.push({
        label: "",
        prop: "t"
      });
      for (let i = 0; i < column.length; i++) {
        tableData.push({
          t: column[i].label,
          p: column[i].prop
        });
      }
      for (let i = 0; i < dataList.length; i++) {
        let data = dataList[i];
        tableColumn.push({
          label: "",
          prop: i + ""
        });
        tableData.forEach(item => {
          item[i] = data[item.p];
        });
      }
      this.tableColumn = tableColumn;
      this.tableData = tableData;
    },
    cellClassName(row, column, cell, event) {
      if (row.columnIndex == 0) {
        return "titleCell";
      }
      return "contCell";
    }
  },
  created() {
    this.toTableData();
  }
};
</script>
<style scoped>
.grid {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  user-select: none;
  max-width: 95%;
  color: "#333333";
  font-weight: bold;
  float: left;
  align-items: center;
}
</style>
<style>
.contCell {
  background: none !important;
  font-weight: bold;
  color: #333333;
}
.titleCell {
  color: #3c65d7 !important;
  background: none !important;
  font-weight: bold;
}
</style>
